<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	用户名: <input type="text" name="">
	<p style="color:red;"></p>

	<select>
		<option value="wzry">王者荣耀</option>
		<option value="atm">奥特曼</option>
		<option value="syx">宋亚轩</option>
		<option value="dxx">顶晨曦</option>
		<option value="mjq">马嘉祺</option>
		<option value="kdc">卡丁车</option>

	</select>
	<script type="text/javascript">
		let inp = document.querySelector("input")
		let p = document.querySelector("p")
		let select = document.querySelector("select")



		// 表单失去焦点
		inp.onblur =function(){
			// alert("111")
			console.log(this.value)
			if(!this.value){
				p.innerText = "用户名不能为空"
			}else if(this.value.length < 5){
				p.innerText = "用户不能小于5位数"
			}
		}
		// 表单获取焦点
		inp.onfocus = function(){
			// console.log("222")
		}

		// 表单值改变的时候 select
		inp.onchange = function(){
			console.log("改变了")
		}

		select.onchange = function(){
			console.log("选项更改了" , this.value)
		}
	</script>
</body>
</html>